import React, { useState } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import { Card, Button, DatePicker, Drawer, Upload, Form, Input, Select, Space, notification } from 'antd';
import '../../style/Personcenter.scss'
// import logo from "../../assets/logo.png"
import { user_avatar, user_personal } from '../../utils/api'
import { useRef } from 'react';
import { useEffect } from 'react';
import { connect } from 'react-redux';
import zhanweilogo from "../../assets/zhanweilogo.png"
import { create_imgaction_add, create_userpersonal_add } from "../../store/actionCreator/index"
const { Option } = Select;

const formItemLayout = {
    labelCol: {
        xs: {
            span: 24,
        },
        sm: {
            span: 8,
        },
    },
    wrapperCol: {
        xs: {
            span: 24,
        },
        sm: {
            span: 16,
        },
    },
};
const tailFormItemLayout = {
    wrapperCol: {
        xs: {
            span: 24,
            offset: 0,
        },
        sm: {
            span: 16,
            offset: 8,
        },
    },
};
function Personcenter(props) {

    var province = ["西安", "宝鸡", "咸阳", "铜川", "渭南", "延安", "榆林", "汉中", "安康", "商洛"]
    const [form] = Form.useForm();
    // var userinfo = JSON.parse(localStorage.getItem('userinfo'))
    const [open, setOpen] = useState(false);

    const showDrawer = () => {
        setOpen(true);
    };
    var handleOk = () => {
        form.submit();
    }

    var myref = useRef()
    const onClose = () => {
        setOpen(false);
    };
    const onFinish = (values) => {
        console.log(values)
        console.log(props.userinfo.key)
        var time = values.time.$y + "-" + (values.time.$M + 1) + '-' + values.time.$D;
        console.log(time)
        props.updateuserinfo({ key: props.userinfo.key, phone: values.phone, name: values.name, email: values.email, address: values.address, signature: values.signature, time })

    }

    var uploadchange = (e) => {
        console.log(e.target.files[0])
        var fd = new FormData();
        fd.append('avatar', e.target.files[0]);
        fd.append('id', props.userinfo.key)

        user_avatar(fd).then((res) => {
            console.log(res.data);
            if (res.data.code == 200) {
                notification.success({
                    message: res.data.msg,
                    duration: 1
                });
                props.addavatar(res.data.userinfo.avatar)
            } else {
                notification.error({
                    message: res.data.msg,
                    duration: 1
                });
            }
            // setAvaturl('data:image/png;base64,' + res.data.userinfo.avatar);
        })
    }
    var uploadAvater = () => {
        myref.current.click();
    }
    return (
        <div className='personcenter' style={{ width: '50%', margin: "auto" }}>
            <Card bordered={false} style={{ boxShadow: "2px 2px 20px #ccc" }} >
                <div className="header">
                    <h3>基本信息</h3>
                    <span onClick={showDrawer}>编辑</span>
                    <>
                        <Drawer
                            title="Create a new account"
                            width={720}
                            onClose={onClose}
                            open={open}
                            style={{ background: '#E4E5DF' }}
                            // bodyStyle={{
                            //     background: "rgba(0,0,0,)",
                            // }}
                            extra={
                                <Space>
                                    <Button onClick={onClose}>Cancel</Button>
                                    <Button onClick={handleOk} type="primary">
                                        Submit
                                    </Button>
                                </Space>
                            }
                        >
                            <div className="img" style={{ width: "60px", height: "60px" }}>
                                <img src={props.userinfo.avatar ? 'data:image/png;base64,' + props.userinfo.avatar : zhanweilogo} alt="" style={{ width: "100%", height: "100%", borderRadius: '50%', objectFit: "cover" }} onClick={() => { uploadAvater() }} />
                                <input type="file" style={{ visibility: "hidden" }} onChange={(e) => { uploadchange(e) }} ref={myref} />
                            </div>
                            <Form layout="vertical"
                                {...formItemLayout}
                                form={form}
                                onFinish={onFinish}
                                hideRequiredMark>


                                <Form.Item
                                    name="name"
                                    label="用户名"
                                    rules={[
                                        {
                                            required: true,
                                            message: 'Please enter user name',
                                        },
                                    ]}
                                >
                                    <Input placeholder="Please enter user name" />
                                </Form.Item>
                                <Form.Item
                                    name="phone"
                                    label="手机号"
                                    rules={[
                                        {
                                            required: true,
                                            message: 'Please select an owner',
                                        },
                                        {
                                            validator: (rule, value) => {
                                                let reg = new RegExp(/^(?:(?:\+|00)86)?1[3-9]\d{9}$/);
                                                if (reg.test(value) == false) {
                                                    return Promise.reject('手机号不合规范');
                                                } else {
                                                    return Promise.resolve();
                                                }
                                            }
                                        },
                                    ]}
                                >
                                    <Input placeholder="Please enter user phone" />
                                </Form.Item>
                                <Form.Item
                                    name="email"
                                    label="电子邮箱"
                                    rules={[
                                        {
                                            required: true,
                                            message: 'Please choose the type',
                                        },
                                    ]}
                                >
                                    <Input placeholder="Please enter user email" />
                                </Form.Item>

                                <Form.Item
                                    name="address"
                                    label="地址"
                                    rules={[
                                        {
                                            required: true,
                                            message: 'Please choose the approver',
                                        },
                                    ]}
                                >

                                    <Select placeholder="Please choose the address">
                                        {
                                            province.map((item, index) => {
                                                return (
                                                    <Option key={index} value={item}>{item}</Option>
                                                )
                                            })
                                        }
                                    </Select>


                                </Form.Item>

                                <Form.Item
                                    name="time"
                                    label="创建日期"
                                    rules={[
                                        {
                                            required: true,
                                            message: 'Please choose the dateTime',
                                        },
                                    ]}
                                >
                                    <DatePicker
                                        style={{
                                            width: '100%',
                                        }}

                                    />
                                </Form.Item>

                                <Form.Item
                                    name="signature"
                                    label="个性签名"
                                    rules={[
                                        {
                                            required: true,
                                            message: 'please enter url description',
                                        },
                                    ]}
                                >
                                    <Input.TextArea rows={4} placeholder="please enter url description" />
                                </Form.Item>

                            </Form>
                        </Drawer>
                    </>
                </div>
                <div className="sculpture">
                    <span>头像</span>
                    <img src={props.userinfo.avatar ? 'data:image/png;base64,' + props.userinfo.avatar : zhanweilogo} alt="" />
                </div>
                <div className="account">
                    <span>账号</span>
                    <span>{props.userinfo.user}</span>
                </div>
                <div className="username">
                    <span>用户名</span>
                    <span>{props.userinfo.name}</span>
                </div>
                <div className="email">
                    <span>邮箱</span>
                    <span>{props.userinfo.email}</span>
                </div>
                <div className="phone">
                    <span>手机</span>
                    <span>{props.userinfo.phone}</span>
                </div>
                <div className="phone">
                    <span>地址</span>
                    <span>{props.userinfo.address ? props.userinfo.address : "暂无地址"}</span>
                </div>
                <div className="phone">
                    <span>个性签名</span>
                    <span>{props.userinfo.signature ? props.userinfo.signature : "暂无个性签名"}</span>
                </div>

                <div className="role">
                    <span>角色</span>
                    <span>{props.userinfo.role.name}</span>
                </div>
            </Card>
        </div>
    );
}

export default connect(
    (state) => {
        return {
            userinfo: state.userinfo
        }
    },
    (dispatch) => {
        return {
            addavatar: function (item) {
                dispatch(create_imgaction_add(item))
            },
            updateuserinfo: function (item) {
                dispatch(create_userpersonal_add(item))
            }
        }
    }

)
    (Personcenter);